<script setup>
    import { getFacilityOnlineDetails, getFacilityOnlineEdit } from '@/api/home'
    // import { ElMessage } from 'element-plus'

    let form = $ref({})
    let dataLoading = $ref(false)
    let showDialog = $ref(false)
    let btnLoading = $ref(false)


    let params = [
        {
            name: '智慧机井',
            sub: ['wisdomDrivenSum', 'wisdomDrivenOnlineNumb']
        },
        {
            name: '气象监测',
            sub: ['wheatherDetectionSum', 'wheatherDetectionOnlineNumb']
        },
        {
            name: '土壤墒情',
            sub: ['soilSum', 'soilOnlineNumb']
        },
        {
            name: '虫情测报',
            sub: ['pestSum', 'pestOnlineNumb']
        },
        {
            name: '水肥设备',
            sub: ['voyagesSum', 'voyagesOnlineNumb']
        },
        {
            name: '农田可视化',
            sub: ['visualizationSum', 'visualizationOnlineNumb']
        }
    ]


    const showOnlineForm = () => {
        showDialog = true
        dataLoading = true
        getFacilityOnlineDetails().then(res => {
            dataLoading = false
            form = res.result
        })
    }

    // 保存
    const handleClickSave = () => {

        for(let i = 0; i < params.length; i++){
            let p = params[i]
            let total = form[p.sub[0]] ? form[p.sub[0]] : 0
            let online = form[p.sub[1]] ? form[p.sub[1]] : 0
            if(total < online){
                ElMessage.error(p.name + '在线数不能超过总数~')
                return 
            }
        }


        btnLoading = true
        getFacilityOnlineEdit(form).then(res => {
            btnLoading = false
            if(res.success){
                ElMessage.success('提交成功~')
                showDialog = false
            }
        })
    }

    defineExpose({
        showOnlineForm
    })


</script>

<template>
    <el-dialog
        width="802px"
        title="各设备在线概览"
        v-model="showDialog"
        custom-class="form-dialog"
    >
        <div class="form-item" v-loading="dataLoading">
            <div 
                class="form-row"
                v-for="(item, index) in params"
                :key="index"
            >
                <div class="title">{{ item.name }}</div>
                <div class="input-wrap">
                    <div 
                        class="row-count-2" 
                        v-for="(sub, sIndex) in item.sub"
                        :key="sIndex"
                    >
                        <el-input-number :controls="false" :placeholder="sIndex ? '在线数' : '总数'" v-model="form[sub]" />
                        <span class="label">台</span>
                    </div>
                </div>
            </div>

        </div>

        <template #footer>
            <span class="dialog-footer flex-center">
                <el-button @click="showDialog = false">取消</el-button>
                <el-button 
                    type="primary" 
                    @click="handleClickSave" 
                    :loading="btnLoading"
                >保存</el-button>
            </span>
        </template>
                
    </el-dialog>
</template>